<template>
   <div>这是配置式api</div>
   <div class="task-container">
    <div >
      <input type="text" v-model="inputTaskValue.text" />
      <span>{{inputTaskValue.text}}</span> 
    <button @click="addTask()">添加任务</button>
    <button @click="toggleTaskshow()">{{isTaskListShow==true?"隐藏列表":"显示列表"}}</button>
    </div>
    
    <div v-if="isTaskListShow">
      <li v-for="valueItem in inputTaskValues" :key="valueItem">
         {{ valueItem.text }} <button  @click="deleteTaskItem(valueItem.id)">删除</button>
    </li>
    </div>
  </div>
   

   <div class="router-container">
    <input type="text" v-model="routerValue" />
    <button @click="addRouter()">添加路径</button>
    <div>{{ routerValues }}</div>
   </div>
  </template>
  
  <script>
  function generateGUID() {
      function s4() {
          return Math.floor((1 + Math.random()) * 0x10000)
              .toString(16)
              .substring(1);
      }
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
          s4() + '-' + s4() + s4() + s4();
  }
  
  export default {
      data() {
          return {
              inputTaskValue: {},
              inputTaskValues: [],
              isTaskListShow:true,
              routerValue:"",
              routerValues:""
          };
         
      },
      methods:{
              addTask(){

                  this.inputTaskValues.push({id:generateGUID(),text:this.inputTaskValue.text})
              },
              toggleTaskshow(){
                this.isTaskListShow =!this.isTaskListShow
              },
              deleteTaskItem(id){
                let indexToRemove = this.inputTaskValues.findIndex(item => item.id === id);
                if (indexToRemove !== -1) {
                  this.inputTaskValues.splice(indexToRemove, 1);
                }
              },
              addRouter(){
                  this.routerValues =  this.routerValues + (this.routerValues!=''?"-":"") + this.routerValue
              },              
      }
  }
  </script>
  
  <style>
  .router-container{
    margin-top: 50px;
    border-width: 1px; /* 边框宽度为2像素 */
    border-style: solid; /* 边框样式为实线 */
    min-height: 100px;
    padding: 10px;
  }
  .task-container{
    border-width: 1px; /* 边框宽度为2像素 */
    border-style: solid; /* 边框样式为实线 */
    min-height: 100px;
    padding: 10px;
  }
  </style>